@charset "utf-8";

/*
_____________________________________________________________________________
 应用元素：div
 应用场景：标题下存放字段，但不属于group里，一行放置 描述、字段
 作用：一行展示一个字段
*/
.df_subtitle_online {
    width: 35%;
}

.df_subtitle_online > div{
    display: flex;
    margin: 3px 0;
}

.df_subtitle_online h4{
    width:25%;
    margin-right:3%;
    font-weight: 600;
    font-size: 1em;
    color:#666666;
}

/*
_____________________________________________________________________________
 应用元素：div
 应用场景：标题下存放字段，但不属于group里，一行放置 描述、字段、描述、字段
 作用：一行展示两个字段
*/
.dfdf_subtitle_online {
    width: 60%;
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.dfdf_subtitle_online > div{
    display: flex;
    margin: 3px 5% 3px 0;
}

.dfdf_subtitle_online h4{
    width: 7vw;
    margin-right: 3%;
    font-weight: 600;
    font-size: 1em;
    color: #666666;
}

/*
_____________________________________________________________________________
 应用元素：div
 应用场景：标题右侧放置一个书签
 作用：醒目标识
 注意：需要配合right使用,自由确定位置
*/

.title_bookmark1 {
    position: absolute;
    /*right: 200px;*/
    top: -20px;
    width: 80px;
    height: 175px;
    z-index: 10;
    font-size: 25px;
    font-family: monospace;
    color: #e9ecef;
    background: url(../img/bookmark1.png);
    text-align: center;
    background-size: 100% 100%;
    padding: 10px 22px;
    writing-mode: vertical-rl;
    letter-spacing: 5px;
}

.title_bookmark2 {
    position: absolute;
    top: -20px;
    width: 80px;
    height: 175px;
    z-index: 10;
    font-size: 25px;
    font-family: monospace;
    color: #e9ecef;
    background: url(../img/bookmark2.png);
    text-align: center;
    background-size: 100% 100%;
    padding: 10px 22px;
    writing-mode: vertical-rl;
    letter-spacing: 5px;
}

.title_bookmark3 {
    position: absolute;
    top: -20px;
    width: 80px;
    height: 175px;
    z-index: 10;
    font-size: 25px;
    font-family: monospace;
    color: #e9ecef;
    background: url(../img/bookmark3.png);
    text-align: center;
    background-size: 100% 100%;
    padding: 10px 22px;
    writing-mode: vertical-rl;
    letter-spacing: 5px;
}

.title_bookmark4 {
    position: absolute;
    top: -20px;
    width: 80px;
    height: 175px;
    z-index: 10;
    font-size: 25px;
    font-family: monospace;
    color: #e9ecef;
    background: url(../img/bookmark4.png);
    text-align: center;
    background-size: 100% 100%;
    padding: 10px 22px;
    writing-mode: vertical-rl;
    letter-spacing: 5px;
}

/*
_____________________________________________________________________________
 应用元素：div
 应用场景：标题右侧放置一个警示标签,并允许附加文字
 作用：醒目标识
 注意：需要配合right使用,自由确定位置
*/

.title_caution {
    display:flex;
    align-items: center;
    position: absolute;
    top: 60px;
    right: 30px;
    font-size: 16px;
    color: #dc3545;
    font-weight: bold;
}

.title_caution .title_caution_svg{
    background: url(../svg/caution.svg);
    width: 35px;
    height: 35px;
    margin-right:8px;
    background-size: cover;
	background-position: center;
}

/*
_____________________________________________________________________________
 应用元素：div
 应用场景：标题右侧放置一个小飞机标签,并允许附加文字
 作用：醒目标识
 注意：需要配合right使用,自由确定位置
*/

.title_publish {
    display:flex;
    align-items: center;
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 16px;
    color: #667DB6;
    font-weight: bold;
}

.title_publish .title_publish_svg{
    background: url(../svg/publish.svg);
    width: 35px;
    height: 35px;
    margin-right:8px;
    background-size: cover;
	background-position: center;
}

/*
_____________________________________________________________________________
 应用元素：div
 应用场景：标题右侧放置一个置顶标签,并允许附加文字
 作用：醒目标识
 注意：需要配合right使用,自由确定位置
*/

.title_top {
    display:flex;
    align-items: center;
    position: absolute;
    top: 70px;
    right: 30px;
    font-size: 16px;
    color: #dc3545;
    font-weight: bold;
}

.title_top .title_top_svg{
    background: url(../svg/top.svg);
    width: 35px;
    height: 35px;
    margin-right:8px;
    background-size: cover;
	background-position: center;
}

/*
---------------------------------------
应用场景：键值对的展示
场景：表单中展示Key-Value的效果
作用：展示键值对信息
格式：
        <div class="key_value">
                 <span>key：</span>
                  <field name="xxx" class="field"/>
       </div>
*/

.key_value {
    position: absolute;
    top: 38px;
    right: 53px;
    display: flex;
    width: 120px;
    height: 32px;
    justify-content: space-evenly;
    align-items: center;
    line-height: 20px;
}

.key_value > .field {
    transform: translateY(6px);
    font: normal bolder 14px 'Helvetica';
}

.key_value span {
    font: normal bold 16px/22px '黑体';
    transform: translateY(3px);
}